<template>
  <div class="product-wrapper" @click="navigateTo(`/productDetail/${product.id}`)">
    <img :src="getImagePath(product.image)" alt="" class="product-image" />
    <div class="product-title">{{ product.name }}</div>
    <div class="product-cost">¥ {{ product.price }}</div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import { useNavigate } from "../hooks/useNavigate";
const { navigateTo } = useNavigate();
import s88 from "@/assets/racket/s88.jpg";
import pro800 from "@/assets/racket/pro800.jpg";
import pro11 from "@/assets/racket/pro11.jpg";
import pcaz2 from "@/assets/shoes/pcaz2.jpg";
import cfz3 from "@/assets/shoes/cfz3.jpg";
import pce3 from "@/assets/shoes/pce3.jpg";
import l63 from "@/assets/line/l63.jpg";
import ab from "@/assets/line/ab.jpg";
import l95 from "@/assets/line/l95.jpg";
defineProps({
  product: {
    type: Object,
    required: true,
  },
});

// 映射图片路径
const imageMap = {
  "@/assets/racket/s88.jpg": s88,
  "@/assets/racket/pro800.jpg": pro800,
  "@/assets/racket/pro11.jpg": pro11,
  "@/assets/shoes/pcaz2.jpg": pcaz2,
  "@/assets/shoes/cfz3.jpg": cfz3,
  "@/assets/shoes/pce3.jpg": pce3,
  "@/assets/line/l63.jpg": l63,
  "@/assets/line/ab.jpg": ab,
  "@/assets/line/l95.jpg": l95,
};
const getImagePath = (path) => {
  return imageMap[path] || path;
};
</script>

<style scoped>
.product-title {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 6px;
}
.product-cost {
  text-align: center;
  color: #0057b8;
  font-weight: bolder;
  font-size: 18px;
}
.product-container {
  cursor: pointer;
}
/* 产品图片包裹容器 */
.product-wrapper {
  position: relative;
  text-align: center;
  overflow: hidden; /* 确保图片不超出容器 */
  transition: all 0.3s ease;
  cursor: pointer;
}

/* 产品图片样式 */
.product-image {
  width: 50%;
  height: auto;
  transition: transform 0.3s ease; /* 添加平滑缩放效果 */
}

/* 鼠标悬浮时图片放大 */
.product-wrapper:hover .product-image {
  transform: scale(1.05); /* 放大图片 */
}
</style>
